<template>
    <div class="bankList"  :style="'height: ' + pageHeight + 'px;overflow: scroll;'">
      <jm-head ref="head"></jm-head>
         <div>
            <div class="bankList_menu box">
                <van-address-list
                    v-model="defaultAddr"
                    :list="bankList"
                    :switchable="isSelect"
                    default-tag-text="默认"
                    add-button-text="添加银行卡"
                    @select="active"
                    @add="onAdd"
                    @edit="onEdit"
                >
                <div style="width: 100%;height: 70px;"></div>
                </van-address-list>

            </div>
            <van-empty class="vant-image" description="暂无银行卡" image="https://meibaolianmeng.oss-cn-beijing.aliyuncs.com/cdn/address.png?x-oss-process=image/interlace,1/format,png"  v-if = "!haveLists"></van-empty>
         </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { Toast,AddressList,Empty } from 'vant';
    import { getList } from "@/api/bank";
    import Cookies from 'js-cookie'
    import JmHead from '../head/head'

    Vue.use(AddressList).use(Empty)
    export default {
        name: 'bankList',
        components: {
            JmHead
        },
        data () {
            return {
                bankList: [],
                data: [],
                haveLists: false,
                defaultAddr: "0",
                pageHeight: 0,
                isSelect: false,
            }
        },
        methods: {
            getList() {
                getList({}).then(res => {
                    this.data = []
                    this.bankList = []
                    if(res.data.lists.length === 0){
                        this.haveLists = false
                    } else {
                        this.haveLists = true
                        this.data = res.data.lists
                        res.data.lists.filter(item => {
                            let obj = {}
                            obj.id = item.id.toString()
                            obj.name = item.accepter_name
                            obj.tel = item.accepter_phone
                            obj.address = "尾号" + item.bank_code.slice(-4) + "储蓄卡" + "【"+item.bank_name+"】"
                            obj.isDefault = item.id === res.data.banId
                            this.bankList.push(obj)
                        })
                    }
                })
            },
            onEdit(item, index) {
                const obj = this.data[index]
                obj.isDefault = item.isDefault ? 1 : 0
                this.$router.push({path: '/bank/add', query: obj})
            },
            onAdd() {
                this.$router.push({path: '/bank/add', query: {id: 'new'}})
            },
            active(item, index) {
                if (!this.isSelect) {
                    return
                }
                Cookies.set('bankId', item.id, { expires: 7000 })
                this.$router.go(-1)
            }
        },
        activated: function () {
            if (this.$route.query.type !== undefined) {
                this.isSelect = true
            }
            this.pageHeight = window.innerHeight
            this.getList()

            this.$refs.head.setNavBarUrl()
        }
    }
</script>

<style>
    .vant-image{
        margin-top: 2rem;
    }
    .vant-image .van-empty__image{
        width: 90px;
        height: 90px;
    }
</style>
<style lang="stylus" scoped>
    .bankList
        width 100%
        height 100%
        overflow hidden
        background #f5f5f5
        .bankList_menu
            width 100%
            overflow hidden

            .van-address-list
                padding-bottom 0
            p
                font-size .24rem
                color #9e9e9e
                text-align center
                line-height 1.5
                padding .3rem 0
            .footer_tip
                font-size .26rem
                text-align center
                width 100%
                color #000
                line-height .44rem
                padding .3rem
</style>
